<html>
<head>
<title>day15-作业-下拉刷新-触底加载-获取评论.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #52cb54;}
.s1 { color: #a9b7c6;}
.s2 { color: #faa23d;}
.s3 { color: #aa7dfc;}
.s4 { color: #e2da90;}
.s5 { color: #db7e9b;}
.s6 { color: #bbb529;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day15-作业-下拉刷新-触底加载-获取评论.ets</font>
</center></td></tr></table>
<pre><span class="s0">//1.导入一个包</span>
<span class="s1">import </span><span class="s2">{ </span><span class="s1">http </span><span class="s2">} </span><span class="s1">from </span><span class="s3">'@kit.NetworkKit'</span>

<span class="s1">export interface IJokesRes </span><span class="s2">{</span>
  <span class="s0">/** 
   * 总页码数，默认后台设置了10条1页 
   */</span>
  <span class="s1">allPage</span><span class="s4">: </span><span class="s1">number</span><span class="s4">;</span>

  <span class="s0">/** 
   * 响应数据 
   */</span>
  <span class="s1">data</span><span class="s4">: </span><span class="s1">Datum</span><span class="s5">[]</span><span class="s4">;</span>

  <span class="s0">/** 
   * 响应消息 
   */</span>
  <span class="s1">msg</span><span class="s4">: </span><span class="s1">string</span><span class="s4">;</span>

  <span class="s0">/** 
   * 业务状态码，200成功 
   */</span>
  <span class="s1">status</span><span class="s4">: </span><span class="s1">number</span><span class="s4">;</span>
<span class="s2">}</span>

<span class="s1">export interface Datum </span><span class="s2">{</span>
  <span class="s0">/** 
   * 评论内容 
   */</span>
  <span class="s1">content</span><span class="s4">: </span><span class="s1">string</span><span class="s4">;</span>

  <span class="s0">/** 
   * 评论id 
   */</span>
  <span class="s1">id</span><span class="s4">: </span><span class="s1">number</span><span class="s4">;</span>

  <span class="s0">/** 
   * 评论时间 
   */</span>
  <span class="s1">time</span><span class="s4">: </span><span class="s1">string</span><span class="s4">;</span>

  <span class="s0">/** 
   * 评论者姓名 
   */</span>
  <span class="s1">username</span><span class="s4">: </span><span class="s1">string</span><span class="s4">;</span>
<span class="s2">}</span>

<span class="s6">@</span><span class="s1">Entry</span>
<span class="s6">@</span><span class="s1">Component</span>
<span class="s1">struct Index </span><span class="s2">{</span>
  <span class="s0">//定义一个状态变量，双向绑定，监听用户是否下拉刷新</span>
  <span class="s6">@</span><span class="s1">State refreshing</span><span class="s4">: </span><span class="s1">boolean </span><span class="s4">= </span><span class="s1">false</span>
  <span class="s0">//定义一个字符串数组。用来保存请求回来的数据</span>
  <span class="s6">@</span><span class="s1">State Jokes</span><span class="s4">: </span><span class="s1">Datum</span><span class="s5">[] </span><span class="s4">= </span><span class="s5">[]</span>
  <span class="s1">jokeNum</span><span class="s4">: </span><span class="s1">number </span><span class="s4">= </span><span class="s1">Math</span><span class="s4">.</span><span class="s1">floor</span><span class="s5">(</span><span class="s1">Math</span><span class="s4">.</span><span class="s1">random</span><span class="s5">() </span><span class="s4">* </span><span class="s7">10 </span><span class="s4">+ </span><span class="s7">1</span><span class="s5">)</span>
  <span class="s0">//✅✅✅给数据加把锁，数据没加载完之前，无论用户怎么滑动触底都不会在请求数据</span>
  <span class="s0">//   //数据加载完成后，开锁，用户可以继续滑动触底加载请求数据</span>
  <span class="s0">//   //1.定义一个变量，判断是否开关锁</span>
  <span class="s1">isLoading </span><span class="s4">= </span><span class="s1">false</span>

  <span class="s0">// aboutToAppear(): void {</span>
  <span class="s0">//   this.getJokes()</span>
  <span class="s0">// }</span>

  <span class="s1">private getJokes</span><span class="s5">() </span><span class="s2">{</span>
    <span class="s0">//2.创建一个http请求对象 http.createHttp()</span>
    <span class="s1">const req </span><span class="s4">= </span><span class="s1">http</span><span class="s4">.</span><span class="s1">createHttp</span><span class="s5">()</span>
    <span class="s1">req</span><span class="s4">.</span><span class="s1">request</span><span class="s5">(</span><span class="s3">`https://hmajax.itheima.net/api/cmtlist?page=</span><span class="s2">${</span><span class="s1">this</span><span class="s4">.</span><span class="s1">jokeNum</span><span class="s2">}</span><span class="s3">`</span><span class="s5">)</span>
      <span class="s4">.</span><span class="s1">then</span><span class="s5">((</span><span class="s1">res</span><span class="s5">) </span><span class="s4">=&gt; </span><span class="s2">{</span>
        <span class="s1">const result </span><span class="s4">= </span><span class="s1">JSON</span><span class="s4">.</span><span class="s1">parse</span><span class="s5">(</span><span class="s1">res</span><span class="s4">.</span><span class="s1">result as string</span><span class="s5">) </span><span class="s1">as IJokesRes</span>
        <span class="s1">this</span><span class="s4">.</span><span class="s1">Jokes </span><span class="s4">= </span><span class="s1">result</span><span class="s4">.</span><span class="s1">data</span>
        <span class="s0">//数据请求回来关闭下拉刷新</span>
        <span class="s1">this</span><span class="s4">.</span><span class="s1">refreshing </span><span class="s4">= </span><span class="s1">false</span>
      <span class="s2">}</span><span class="s5">)</span>
  <span class="s2">}</span>

  <span class="s1">private getMoreJokes</span><span class="s5">() </span><span class="s2">{</span>
    <span class="s1">const req </span><span class="s4">= </span><span class="s1">http</span><span class="s4">.</span><span class="s1">createHttp</span><span class="s5">()</span>
    <span class="s1">this</span><span class="s4">.</span><span class="s1">isLoading </span><span class="s4">= </span><span class="s1">true</span>
    <span class="s1">req</span><span class="s4">.</span><span class="s1">request</span><span class="s5">(</span><span class="s3">`https://hmajax.itheima.net/api/cmtlist?page=</span><span class="s2">${</span><span class="s1">this</span><span class="s4">.</span><span class="s1">jokeNum</span><span class="s2">}</span><span class="s3">`</span><span class="s5">)</span>
      <span class="s4">.</span><span class="s1">then</span><span class="s5">((</span><span class="s1">res</span><span class="s5">) </span><span class="s4">=&gt; </span><span class="s2">{</span>
        <span class="s1">const result </span><span class="s4">= </span><span class="s1">JSON</span><span class="s4">.</span><span class="s1">parse</span><span class="s5">(</span><span class="s1">res</span><span class="s4">.</span><span class="s1">result as string</span><span class="s5">) </span><span class="s1">as IJokesRes</span>
        <span class="s1">this</span><span class="s4">.</span><span class="s1">Jokes</span><span class="s4">.</span><span class="s1">push</span><span class="s5">(</span><span class="s4">...</span><span class="s1">result</span><span class="s4">.</span><span class="s1">data</span><span class="s5">)</span>
        <span class="s1">this</span><span class="s4">.</span><span class="s1">isLoading </span><span class="s4">= </span><span class="s1">false</span>
      <span class="s2">}</span><span class="s5">)</span>
  <span class="s2">}</span>

  <span class="s1">build</span><span class="s5">() </span><span class="s2">{</span>
    <span class="s1">Refresh</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">refreshing</span><span class="s4">: </span><span class="s1">$$this</span><span class="s4">.</span><span class="s1">refreshing </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
      <span class="s1">Column</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s4">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
        <span class="s1">Text</span><span class="s5">(</span><span class="s3">'评论列表'</span><span class="s5">)</span>
          <span class="s4">.</span><span class="s1">fontSize</span><span class="s5">(</span><span class="s7">20</span><span class="s5">)</span>
          <span class="s4">.</span><span class="s1">fontWeight</span><span class="s5">(</span><span class="s7">600</span><span class="s5">)</span>
        <span class="s1">Divider</span><span class="s5">()</span>
        <span class="s1">List</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s4">: </span><span class="s7">15 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
          <span class="s1">ForEach</span><span class="s5">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">Jokes</span><span class="s4">, </span><span class="s5">(</span><span class="s1">item</span><span class="s4">: </span><span class="s1">Datum</span><span class="s5">) </span><span class="s4">=&gt; </span><span class="s2">{</span>
            <span class="s1">ListItem</span><span class="s5">() </span><span class="s2">{</span>
              <span class="s1">Column</span><span class="s5">() </span><span class="s2">{</span>
                <span class="s1">Row</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s4">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
                  <span class="s1">Image</span><span class="s5">(</span><span class="s1">$r</span><span class="s5">(</span><span class="s3">'app.media.ic_common_send'</span><span class="s5">))</span>
                    <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s7">60</span><span class="s5">)</span>
                  <span class="s1">Column</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s4">: </span><span class="s7">5 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
                    <span class="s1">Text</span><span class="s5">(</span><span class="s1">item</span><span class="s4">.</span><span class="s1">username</span><span class="s5">)</span>
                      <span class="s4">.</span><span class="s1">fontSize</span><span class="s5">(</span><span class="s7">14</span><span class="s5">)</span>
                      <span class="s4">.</span><span class="s1">fontColor</span><span class="s5">(</span><span class="s3">'#A8A8A8'</span><span class="s5">)</span>
                    <span class="s1">Text</span><span class="s5">(</span><span class="s1">item</span><span class="s4">.</span><span class="s1">content</span><span class="s5">)</span>
                    <span class="s1">Text</span><span class="s5">(</span><span class="s1">item</span><span class="s4">.</span><span class="s1">time</span><span class="s5">)</span>
                      <span class="s4">.</span><span class="s1">fontSize</span><span class="s5">(</span><span class="s7">14</span><span class="s5">)</span>
                      <span class="s4">.</span><span class="s1">fontColor</span><span class="s5">(</span><span class="s3">'#A8A8A8'</span><span class="s5">)</span>
                  <span class="s2">}</span>
                  <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s3">'100%'</span><span class="s5">)</span>
                  <span class="s4">.</span><span class="s1">alignItems</span><span class="s5">(</span><span class="s1">HorizontalAlign</span><span class="s4">.</span><span class="s1">Start</span><span class="s5">)</span>
                <span class="s2">}</span>
                <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s3">'100%'</span><span class="s5">)</span>

                <span class="s1">Divider</span><span class="s5">()</span>
                  <span class="s4">.</span><span class="s1">strokeWidth</span><span class="s5">(</span><span class="s7">1</span><span class="s5">)</span>
                  <span class="s4">.</span><span class="s1">margin</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s4">: </span><span class="s7">70</span><span class="s4">, </span><span class="s1">top</span><span class="s4">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">)</span>
              <span class="s2">}</span>
            <span class="s2">}</span>
          <span class="s2">}</span><span class="s5">)</span>
        <span class="s2">}</span>
        <span class="s4">.</span><span class="s1">layoutWeight</span><span class="s5">(</span><span class="s7">1</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">edgeEffect</span><span class="s5">(</span><span class="s1">EdgeEffect</span><span class="s4">.</span><span class="s1">None</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">onReachEnd</span><span class="s5">(() </span><span class="s4">=&gt; </span><span class="s2">{</span>
          <span class="s1">if </span><span class="s5">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">isLoading </span><span class="s4">=== </span><span class="s1">true</span><span class="s5">) </span><span class="s2">{</span>
            <span class="s1">return</span>
          <span class="s2">}</span>
          <span class="s1">this</span><span class="s4">.</span><span class="s1">getMoreJokes</span><span class="s5">()</span>
        <span class="s2">}</span><span class="s5">)</span>
      <span class="s2">}</span>
      <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s3">'100%'</span><span class="s5">)</span>
      <span class="s4">.</span><span class="s1">alignItems</span><span class="s5">(</span><span class="s1">HorizontalAlign</span><span class="s4">.</span><span class="s1">Start</span><span class="s5">)</span>
    <span class="s2">}</span>
    <span class="s0">//1.监听用户刷新状态时触发此回调</span>
    <span class="s4">.</span><span class="s1">onRefreshing</span><span class="s5">(() </span><span class="s4">=&gt; </span><span class="s2">{</span>
      <span class="s1">AlertDialog</span><span class="s4">.</span><span class="s1">show</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">message</span><span class="s4">: </span><span class="s3">'下拉刷新' </span><span class="s2">}</span><span class="s5">)</span>
      <span class="s1">AlertDialog</span><span class="s4">.</span><span class="s1">show</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">message</span><span class="s4">: </span><span class="s1">this</span><span class="s4">.</span><span class="s1">jokeNum</span><span class="s4">.</span><span class="s1">toString</span><span class="s5">() </span><span class="s2">}</span><span class="s5">)</span>
      <span class="s1">setTimeout</span><span class="s5">(() </span><span class="s4">=&gt; </span><span class="s2">{</span>
        <span class="s1">this</span><span class="s4">.</span><span class="s1">jokeNum </span><span class="s4">= </span><span class="s1">Math</span><span class="s4">.</span><span class="s1">floor</span><span class="s5">(</span><span class="s1">Math</span><span class="s4">.</span><span class="s1">random</span><span class="s5">() </span><span class="s4">* </span><span class="s7">10 </span><span class="s4">+ </span><span class="s7">1</span><span class="s5">)</span>
        <span class="s1">this</span><span class="s4">.</span><span class="s1">getJokes</span><span class="s5">()</span>
      <span class="s2">}</span><span class="s4">, </span><span class="s7">3000</span><span class="s5">)</span>
    <span class="s2">}</span><span class="s5">)</span>
  <span class="s2">}</span>
<span class="s2">}</span></pre>
</body>
</html>